
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
    <!-- <div v-if="loading" v-loading="loading"
         element-loading-text="拼命加载中..."
         element-loading-spinner="el-icon-loading"
         class="pop-loading">
    </div> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isRouterAlive: true,
        globalLoading: null
      }
    },
    computed: {
      loading() {
        return this.$store.state.loading.loading;
      }
    },
    watch: {
      loading(val) {
        if (val) {
          this.globalLoading = this.$loading({
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
          });
          // 超过20秒自动关闭
          setTimeout(() => {
            this.globalLoading.close();
          }, 20000);
        } else {
          this.globalLoading && this.globalLoading.close();
        }
      }
    },
    // 点击页面侧边栏重载功能的实现（该处提供了提供给后代组件的数据/方法）
    provide() {
      return {
        isReload: this.isReload
      }
    },
    methods: {
      isReload() {
        this.isRouterAlive = false
        this.$nextTick(() => {
          this.isRouterAlive = true
        })
      }
    }
  }
</script>
<style lang="less">
  @import './style/variables';
  // @import './style/element-ui';
  // @import './style/common';
  @import './style/scrollBar';
  @import './style/main';

  .el-tabs__nav-next, .el-tabs__nav-prev {
    line-height: 30px;
  }

  /* .pop-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9000;
  }

  .pop-loading .el-loading-mask {
    background: none;
  }

  .pop-loading .el-loading-spinner i {
    font-size: 40px;
    color: #fff;
  }

  .pop-loading .el-loading-spinner .el-loading-text {
    color: #fff;
  } */
</style>
